/**
 * Created by Freeman on 2016/7/29.
 */
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import { browserHistory } from 'react-router'
import {resetErrorMessage} from '../actions'
import Explore from '../components/Explore'

class App extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.handleDismissClick = this.handleDismissClick.bind(this)
    }
    handleDismissClick(e){
        this.props.resetErrorMessage()
        e.preventDefault()
    }
    handleChange(nextValue) {
        browserHistory.push(`/${nextValue}`)
    }

    renderErrorMessage() {
        const { errorMessage } = this.props
        if (!errorMessage) {
            return null
        }
        return (
            <p style={{ backgroundColor: '#e99', padding: 10 }}>
                <b>{errorMessage}</b>
                {' '}
                (<a href="#"
                    onClick={this.handleDismissClick}>
                Dismiss
            </a>)
            </p>
        )
    }
    render() {
        const { children , inputValue } = this.props
        return (
            <div>
                <Explore value={inputValue}
                         onChange={this.handleChange} />
                <hr />
                {this.renderErrorMessage()}
                {children}
            </div>
        )
    }
}

App.propTypes = {
    errorMessage: PropTypes.string,
    resetErrorMessage: PropTypes.func.isRequired,
    inputValue: PropTypes.string.isRequired,
    // Injected by React Router
    children: PropTypes.node
}

function mapStateToProps(state,ownProps) {
    return {
        errorMessage: state.errorMessage,
        inputValue: ownProps.location.pathname.substring(1)
    }
}


export default connect(
    mapStateToProps,
    {
        resetErrorMessage
    }
)(App)